//src/components/Screenfull/index.vue
<template>
  <!-- 定义一个 SVG 图标组件，用于切换全屏状态 -->
  <svg-icon
    @click="handleClick"
    custom-class="w-2em h-2em"
    :icon-name="
      isFullScreen
        ? 'ant-design:fullscreen-exit-outlined'
        : 'ant-design:fullscreen-outlined'
    "
  ></svg-icon>
</template>

<script lang="ts" setup>
import screenfull from "screenfull" // 引入 screenfull 库，用于处理全屏相关操作

const isFullScreen = ref(false) // 创建一个响应式变量 isFullScreen，用于记录当前是否处于全屏状态，初始值为 false

const { proxy } = getCurrentInstance()! // 获取当前组件实例

// 定义点击事件处理函数，用于处理图标点击时的操作
function handleClick() {
  // 检查浏览器是否支持全屏功能
  if (screenfull.isEnabled) {
    screenfull.toggle() // 如果支持，切换全屏状态
  } else {
    proxy!.$message("浏览器不支持全屏") // 如果不支持，通过消息提示告知用户浏览器不支持全屏
  }
}

// 定义更新全屏状态的函数，用于监听全屏状态变化并更新 isFullScreen 的值
function updateFullscreenStatus() {
  isFullScreen.value = screenfull.isFullscreen // 获取当前是否处于全屏状态，并更新 isFullScreen 的值
}

// 组件挂载完成后执行的生命周期钩子函数
onMounted(() => {
  // 检查浏览器是否支持全屏功能
  if (screenfull.isEnabled) {
    screenfull.on("change", updateFullscreenStatus) // 如果支持，监听全屏状态变化事件，并在状态变化时调用 updateFullscreenStatus 函数
  }
})

// 组件即将卸载前执行的生命周期钩子函数
onBeforeUnmount(() => {
  // 检查浏览器是否支持全屏功能
  if (screenfull.isEnabled) {
    screenfull.off("change", updateFullscreenStatus) // 如果支持，移除对全屏状态变化事件的监听
  }
})
</script>
